<template>
  <div>
    <el-row style="margin-top:2%">
      <el-col :span="9" :offset="6">
        <el-table
      :data="tableData"
      stripe
      border
      style="width: auto;"
      >
      <el-table-column
        prop="id"
        label="编号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="身份"
        width="100">
      </el-table-column>
      <el-table-column
        prop="authority"
        label="权限代码"
        width="100">
      </el-table-column>
      <el-table-column
        label="状态"
        width="80">
        <template slot-scope="scope">
         {{ scope.row.state == 1 ? "正常" : "禁用" }}
            </template>
      </el-table-column>

      <el-table-column
        label="操作"
       > 
        <template slot-scope = "scope">
        <el-button type="warning"  @click="dochange(scope.row)">修改菜单</el-button>
        </template>
        </el-table-column>
      </el-table>
      </el-col>
    </el-row>
    <!-- 菜单修改tree -->
    <el-dialog title="权限修改" :visible.sync="dialogMenuVisible">
        <el-row>
  <el-col :span=18 align="center">
    <!-- 树形菜单 -->
    <el-tree
  :data="menuList"
  show-checkbox
  node-key="id"
  :default-checked-keys="menuId"
  :props="defaultProps"
  :check-strictly = "ischeck"
  ref = "tree"
  >
    </el-tree>
  </el-col>
</el-row>

        <div slot="footer" >
  <el-button @click="dialogMenuVisible = false">取 消</el-button>
  <el-button type="primary" @click="makesure">确 定</el-button>
  </div>
    </el-dialog>
  </div>
</template>

<script>
 const that = this
export default {
data(){
    return{
        rid:'',
        ischeck: false,
        tableData:[],
        dialogMenuVisible:false,
        menuList:[],
        menuId:[],
        // lable：指定树图显示的内容
        defaultProps: {
          children: 'childrenMenu',
          label: 'menuName'
        },
    }
},
methods:{
    makesure(){
              //获取半选中节点id
      let checkid = this.$refs.tree.getHalfCheckedKeys();
      //获取全选中节点id
    let Halfid =  this.$refs.tree.getCheckedKeys();
    let menutree = {}
    menutree.rid = this.rid
      menutree.menus = checkid.concat(Halfid)
      console.log(menutree)
        this.$axios.post('api/menu/update',menutree,{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res =>{
            console.log(res.data)
            if(res.data.code == 200){
          this.$message({
            message:'授权成功！',
            type:'success'
          })
          
        }
        })

        this.dialogMenuVisible = false
    },
    dochange(row){
        this.rid = row.id
        this.menuId=[]
        console.log(row.id)
        
        this.$axios.get('api/menu/rolelist?rid='+this.rid,{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res =>{
            this.queryMenu()
            console.log(res.data)
            this.ischeck = true  //没有级联效果
            this.$nextTick(() => {
                    this.menuId = res.data.data
                    console.log(this.menuId)
                    this.ischeck = false 
            })
            this.dialogMenuVisible=true
        })
        
    },
   
    queryRole(){
        this.$axios.get('api/role/list',{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res => {
            //console.log(res.data)
            this.tableData = res.data.data
        })
    },
    queryMenu(){
        this.$axios.get('api/menu/menulist',{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res =>{
            console.log(res.data)
            this.menuList = res.data.data
        })
    }
},
created(){
    this.queryRole()
    this.queryMenu()
}
}
</script>

<style>

</style>